<!--
 * @Author: zhangfeng
 * @Date: 2023-12-13 17:58:12
 * @LastEditTime: 2024-01-09 17:22:43
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\menu\MenuPage.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-card class="box-card">
		<el-row class="mb-4">
			<el-button
				v-hasPermi="['system:menus:add']"
				@click="handleAdd"
				type="primary"
				>添加菜单</el-button
			>
			<el-button
				v-hasPermi="['system:menus:updated']"
				@click="handleMultipleEdit"
				:disabled="multipleSelection?.length != 1"
				type="success"
				>修改菜单</el-button
			>
			<el-button
				v-hasPermi="['system:menus:deleted']"
				@click="handleMultipleDelete"
				:disabled="multipleSelection?.length != 1"
				type="danger"
				>删除菜单</el-button
			>
		</el-row>
	</el-card>
	<el-card class="box-card">
		<el-table
			v-loading="loading"
			:data="allMenus"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			default-expand-all
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column
				type="index"
				label="序号"
				sortable
				width="80"
				align="center"
			/>
			<el-table-column prop="name" label="菜单名称" sortable />
			<el-table-column prop="icon" label="图标" sortable />
			<el-table-column prop="path" label="路由" sortable />
			<el-table-column prop="premi" label="权限标识" sortable />
			<el-table-column prop="components" label="组件" sortable />
			<el-table-column prop="shown" label="是否显示" sortable>
				<template #default="scope">
					<span>{{ scope.row.level == 3 ? '' : scope.row.shown }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Operations">
				<template #default="scope">
					<el-button
						v-hasPermi="['system:menus:updated']"
						@click="handleEdit(scope.row)"
						link
						type="primary"
						size="small"
						>修改</el-button
					>
					<el-button
						v-hasPermi="['system:menus:deleted']"
						@click="handleDelete(scope.row.id)"
						link
						type="primary"
						size="small"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<MenuDialog @getlist="getAllmenus()" ref="menuAddModuleRef" />
</template>

<script setup lang="ts">
import { getMenus, deleteMenus } from '../../api/menus';
import MenuDialog from './module/MenuDialog.vue';
import { buildTree, buildTreeDisabled } from '../../utils/utils';
import { globalInjectSymbol } from '../../utils/symbolKey';

const { successOrError } = inject(globalInjectSymbol) || {};
const menuAddModuleRef = ref<InstanceType<typeof MenuDialog>>();

const allMenus = ref([] as MenuItemTree[]);
const menusRawAll = ref([] as MenuItem[]);

const treeData: Ref<MenusItemDisabled[]> = ref([]);
const menusRawAllData = ref([] as MenuItem[]);

const multipleSelection: Ref<MenuItem[]> = ref([]);
const loading = ref(true);
provide('menusAll', treeData);
provide('menusRawAll', menusRawAllData);

console.log(13);
// table selection-change
const handleSelectionChange = (val: MenuItem[]) => {
	multipleSelection.value = val;
};

// 添加菜单
const handleAdd = () => {
	treeData.value = buildTreeDisabled(treeData, null);
	menuAddModuleRef.value?.handleAdd();
};
const getAllmenus = async () => {
	loading.value = true;
	const res: AxiosResponse<List> = await getMenus();
	loading.value = false;
	menusRawAll.value = JSON.parse(JSON.stringify(res.result.list));
	if (res.result.list.length < 1) {
		menusRawAllData.value = [
			{
				id: 0,
				name: '顶层',
				createBy: '',
				createdTime: '',
				description: '',
				href: '',
				icon: '',
				level: undefined,
				operatorId: null,
				orderNum: 0,
				premi: null,
				components: '',
				path: '',
				parentId: -1,
				shown: false,
				updatedBy: '',
				updatedTime: '',
			},
		];
	} else {
		menusRawAllData.value = [
			{
				id: 0,
				name: '顶层',
				createBy: '',
				createdTime: '',
				description: '',
				href: '',
				icon: '',
				level: undefined,
				operatorId: null,
				orderNum: 0,
				parentId: -1,
				premi: null,
				components: '',
				path: '',
				shown: false,
				updatedBy: '',
				updatedTime: '',
			},
			...res.result.list,
		];
	}
	allMenus.value = (await buildTree(res.result.list)) as MenuItemTree[];
	if (allMenus.value) {
		treeData.value = [
			{
				id: 0,
				name: '顶层',
				createBy: '',
				createdTime: '',
				description: '',
				href: '',
				icon: '',
				level: undefined,
				operatorId: null,
				orderNum: 0,
				parentId: -1,
				premi: null,
				components: '',
				path: '',
				shown: false,
				updatedBy: '',
				updatedTime: '',
				children: null,
			},
			...JSON.parse(JSON.stringify(allMenus.value)),
		];
	} else {
		treeData.value = [
			{
				id: 0,
				name: '顶层',
				createBy: '',
				createdTime: '',
				description: '',
				href: '',
				icon: '',
				level: undefined,
				operatorId: null,
				orderNum: 0,
				parentId: -1,
				premi: null,
				components: '',
				path: '',
				shown: false,
				updatedBy: '',
				updatedTime: '',
				children: null,
				disabled: false,
			},
		];
	}
};
getAllmenus();

// 修改
const handleEdit = (scope: MenuItem) => {
	treeData.value = buildTreeDisabled(
		treeData,
		JSON.parse(JSON.stringify(scope))
	);
	menuAddModuleRef.value?.handleEdit(JSON.parse(JSON.stringify(scope)));
};

const handleMultipleEdit = () => {
	handleEdit(multipleSelection.value[0]);
};

// 删除
const handleDelete = async (id: number) => {
	const res: AxiosResponse<ResponseData> = await deleteMenus(id);
	if (successOrError) {
		await successOrError(res);
		getAllmenus();
	}
};

const handleMultipleDelete = async () => {
	handleDelete(multipleSelection.value[0].id as number);
};
</script>

<style scoped></style>
